<script setup lang="ts">
import { onMounted, ref } from 'vue'
import HelloWorld from './HelloWorld.vue'

// 向子组件传值
const count = ref(10)

// 获取子组件传递过来的值
const msg = ref('')
const sendMsg = (val: string): void => {
  console.log(val)
  msg.value = val
}

// 获取dom 对象
const pEle = ref(null)
onMounted(() => {
  // 获取到pEle 对应的dom
  console.log(pEle.value)
})

const sonEle = ref(null)
const sunMsg = (): void => {
  /* 这里的somEle.value.msg 就是子组件传过来的msg */
  alert(sonEle.value.msg)
}

const sunFun = (): void => {
  /* 这里的somEle.value.msg 就是子组件传过来的msg */
  sonEle.value.callParentMethod()
}
</script>

<template>
  <div class="ff">
    <!-- ref属性必须要和响应式对象pEle保持一致 -->
    <p ref="pEle" class="logo vue">
      父组件接收子组件传过来的msg：<b>{{ msg }}</b>
    </p>
    <HelloWorld ref="sonEle" :count="count" @send-msg="sendMsg" />
    <button @click="sunMsg">获取子组件传过来的msg</button>
    <button @click="sunFun">调用子组件的方法</button>
  </div>
</template>

<style scoped>
.ff {
  width: 100%;
  height: 100%;
  background-color: rgb(208, 233, 233);
}
</style>
